import React  from 'react';
import { observer, inject } from 'mobx-react';
import { Route, withRouter, Switch} from 'react-router-dom';
import { asyncComponent } from 'react-async-component';

const coms = {
  // InfoHeaderUi: asyncComponent({
  //   resolve: () => import("./ui/infoHeaderUi")
  // }),
  DetailsLayout: asyncComponent({
    resolve: () => import("./layouts/detailsLayout")
  }),
  EditPage: asyncComponent({
    resolve: () => import("./pages/addPages/editPage")
  }),
  OpinionChildPage: asyncComponent({
    resolve: () => import("./pages/opinionChildPage")
  }),
}
@inject('infoStore')
@withRouter
@observer
/*
 * @info: 详情路由组件
 * @Author: lusx
 * @Date: 2019-12-01 11:13:16
 * @Last modified by:   lusx
 * @Last modified time: 26-03-2019 04:21:40
 */
export default class Info extends React.Component {
  componentDidMount() {
    const {infoStore:{getNavTitle},location} = this.props;
    const navTitle = new URLSearchParams(location.state).get('namespan');
    getNavTitle(navTitle);
  }
  componentDidUpdate(prevProps){
  }
  componentWillUnmount(){
  }

  render() {
    const {infoStore:{navTitle},match} = this.props;
    return(
      <div className="g-info">
        <div className="g-info-body">
          <Switch>
            {/*<Route path={`${match.path}`} exact component={coms.DetailsLayout} />*/}
            <Route path={`${match.path}/edit/:editType`} render={()=>{
              return (<coms.EditPage navTitle={navTitle}/>)
            }}/>
            <Route path={`${match.path}/opinionChild`} component={coms.OpinionChildPage} />
            <Route path={`${match.path}`}  component={coms.DetailsLayout} />
          </Switch>
        </div>
      </div>
    );
  }
}
